<template>
    <el-dialog :title="title" :visible.sync="visible" width="1200px" @close="handleClose" class="order-select-dialog">
        <!-- 搜索区优化：增加阴影和间距 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px"
            class="search-form">
            <el-form-item label="指令编码" prop="orderCode">
                <el-input v-model="queryParams.orderCode" placeholder="请输入指令编码" clearable
                    @keyup.enter.native="handleQuery" class="search-input" />
            </el-form-item>
            <el-form-item label="指令名称" prop="orderName">
                <el-input v-model="queryParams.orderName" placeholder="请输入指令名称" clearable
                    @keyup.enter.native="handleQuery" class="search-input" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="ml-2">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格优化：增加行高、状态标签化、hover效果 -->
        <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" style="width: 100%"
            class="order-table" row-height="50" highlight-current-row>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="指令编码" align="center" prop="orderCode" width="150" />
            <el-table-column label="指令名称" align="center" prop="orderName" width="180" />
            <el-table-column label="行业类型" align="center" prop="gmpIndustry" width="120" />
            <el-table-column label="产品名称" align="center" prop="productName" width="150" />
            <el-table-column label="产品编码" align="center" prop="productCode" width="150" />
            <el-table-column label="规格" align="center" prop="spec" width="100" />
            <el-table-column label="计划产量" align="center" prop="plannedOutput" width="100" />
            <el-table-column label="车间编码" align="center" prop="roomCode" width="120" />
            <el-table-column label="审批人" align="center" prop="approver" width="100" />
            <el-table-column label="审批日期" align="center" prop="approveDate" width="120" />

            <!-- 订单状态：标签化显示，不同状态不同颜色 -->
            <el-table-column label="订单状态" align="center" width="120">
                <template slot-scope="scope">
                    <el-tag :type="orderStatusType[scope.row.orderStatus]" size="small">
                        {{ orderStatusMap[scope.row.orderStatus] }}
                    </el-tag>
                </template>
            </el-table-column>

            <!-- 生产状态：标签化显示 -->
            <el-table-column label="生产状态" align="center" width="120">
                <template slot-scope="scope">
                    <el-tag :type="productionStatusType[scope.row.productionStatus]" size="small">
                        {{ productionStatusMap[scope.row.productionStatus] }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="工作单编码" align="center" prop="workOrderCode" width="180" />
            <!-- 操作列：按钮间距优化 -->
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-download"
                        @click="handleDownload(scope.row.contentUrl)" :disabled="!scope.row.contentUrl"
                        class="operation-btn">
                        下载文件
                    </el-button>
                    <el-button size="mini" type="primary" plain @click="handleSelect(scope.row)"
                        class="operation-btn select-btn">
                        选择
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器：增加上间距 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="handleQuery" class="pagination" />

        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认选择</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listOrder } from "@/api/product/order";

export default {
    name: "SelectOrder",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: "选择生产指令"
        }
    },
    data() {
        return {
            loading: false,
            total: 0,
            orderList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderCode: null,
                orderName: null,
                gmpIndustry: null
            },
            selectedOrder: null,
            // 订单状态映射 + 颜色类型
            orderStatusMap: {
                0: "待复核",
                1: "复核通过",
                2: "不通过",
                3: "已作废"
            },
            orderStatusType: {
                0: "info",     // 待复核-信息蓝
                1: "success",  // 复核通过-成功绿
                2: "danger",   // 不通过-危险红
                3: "gray"      // 已作废-灰色
            },

            // 生产状态：按派单状态注释调整（0-未派单 1-待接单 2-已接单 3-已完成 4-有异常）
            productionStatusMap: {
                0: "未派单",   // 对应0
                1: "待接单",   // 对应1
                2: "已接单",   // 对应2
                3: "已完成",   // 对应3
                4: "有异常"    // 对应4
            },
            // 生产状态颜色：按状态含义匹配直观颜色
            productionStatusType: {
                0: "info",     // 未派单-信息蓝（初始状态）
                1: "primary",  // 待接单-主色蓝（待处理）
                2: "processing", // 已接单-处理中蓝（进行中）
                3: "success",  // 已完成-成功绿（完成状态）
                4: "danger"    // 有异常-危险红（错误状态）
            }
        };
    },
    watch: {
        visible(val) {
            if (val) {
                this.handleQuery();
            }
        }
    },
    methods: {
        getOrderList() {
            this.loading = true;
            listOrder(this.queryParams)
                .then(response => {
                    if (response.code === 200) {
                        this.orderList = response.rows || [];
                        this.total = response.total || 0;
                    } else {
                        this.$message.error("查询失败：" + (response.msg || "未知错误"));
                        this.orderList = [];
                        this.total = 0;
                    }
                    this.loading = false;
                })
                .catch(error => {
                    this.$message.error("接口请求失败：" + error.message);
                    this.loading = false;
                    this.orderList = [];
                    this.total = 0;
                });
        },
        handleQuery() {
            this.getOrderList();
        },
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                orderCode: null,
                orderName: null,
                gmpIndustry: null
            };
            this.handleQuery();
        },
        handleSelectionChange(selection) {
            this.selectedOrder = selection.length > 0 ? selection[selection.length - 1] : null;
        },
        handleSelect(row) {
            this.selectedOrder = row;
            this.$emit("select", row);
            this.visible = false;
        },
        handleConfirm() {
            if (this.selectedOrder) {
                this.$emit("select", this.selectedOrder);
                this.visible = false;
            } else {
                this.$message.warning("请选择一条指令");
            }
        },
        handleClose() {
            this.$emit("update:visible", false);
            this.selectedOrder = null;
            this.resetQuery();
        },
        handleDownload(fileUrl) {
            if (!fileUrl) return;
            window.open(fileUrl, "_blank");
        }
    }
};
</script>

<style scoped>
/* 弹窗整体样式 */
.order-select-dialog {
    --el-dialog-padding-primary: 20px;
}

.order-select-dialog .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.order-select-dialog .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* 搜索区样式 */
.search-form {
    padding: 15px 0;
    margin-bottom: 10px;
    background-color: #fafafa;
    border-radius: 4px;
    padding-left: 15px;
}

.search-input {
    width: 200px;
}

/* 表格样式优化 */
.order-table {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.order-table .el-table__header-wrapper th {
    background-color: #f5f7fa;
    font-weight: 500;
    color: #606266;
    padding: 12px 0;
}

.order-table .el-table__body-wrapper td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.order-table .el-table__row:hover {
    background-color: #f9fafb;
}

.order-table .el-table__current-row {
    background-color: #f0f7ff;
}

/* 操作按钮样式 */
.operation-btn {
    margin: 0 5px;
    padding: 0 8px;
}

.select-btn {
    color: #409eff;
    border-color: #b3d8ff;
}

.select-btn:hover {
    background-color: #ecf5ff;
}

/* 分页器样式 */
.pagination {
    margin-top: 15px;
    text-align: right;
}

/* 底部按钮区 */
.dialog-footer {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

/* 状态标签额外调整 */
::v-deep .el-tag--small {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .order-select-dialog {
        width: 90%;
        max-width: 1000px;
    }
}
</style>